<template>
  <div class="receipt-main">
    <head-top head-title="发单人员认证" go-back="true"></head-top>
    <div class="receipt">
      <div class="tops">
        <p>为了获取双方的信任，更好保护自己利益，请您认真完善以下信息。</p>
      </div>
      <div class="fill_in">
        <ul>
          <li>
            <span>企业名称：</span>
            <input type="text" placeholder="请输入公司名称" v-model.trim="comName">
          </li>
          <li>
            <span>营业执照注册号：</span>
            <input type="text" placeholder="请输入注册号" v-model.trim="regNumber">
          </li>
          <li>
            <span>法人代表姓名：</span>
            <input type="text" placeholder="请输入真实姓名" v-model.trim="name">
          </li>
          <li>
            <span>法人身份证号：</span>
            <input type="text" placeholder="请输入身份证号" v-model.trim="idNumber">
          </li>
          <li>
            <span>法人联系方式：</span>
            <input type="tel" placeholder="请输入电话号码" maxlength="11" v-model.trim="telephone">
          </li>
          <div class="li_address">
            <p>公司地址</p>
            <textarea name="" v-model.trim="address" placeholder="请输入详情的公司地址" id="" cols="30" rows="10"></textarea>
          </div>
        </ul>
      </div>
      <div class="papers">
        <h3>请上传身份证(正反)和书面报告认证</h3>
        <!--微信浏览器图片上传组件-->
        <check-publish v-if="weixinShow" @getImage="getImage" des-text="true"></check-publish>
        <!--普通浏览器图片上传组件-->
        <check-pub v-if="ordinaryShow" @getImg="getImg"></check-pub>
      </div>
      <div class="warn">
        <div class="warn_title">
          <img src="./images/warn@2x.png" alt="">
          <span>请注意</span>
        </div>
        <ul>
          <li>1.请确保提供证件的真实性，同时我们也会保护好您的安全信息。</li>
          <li>2.书面报告要准确有效。</li>
          <li>3.上传的图片不得使用软件进行修改，一旦发现将认证失败。</li>
        </ul>
      </div>
      <div class="receipt-btn">
        <button @click="subRecepit">
          <span>确认提交</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../../components/header/Header.vue'
  // 微信图片组件上传
  import CheckPublish from '../common/checkPublish'
  // 普通浏览器图片上传
  import CheckPub from '../common/checkpublish1'
  import { Toast, Indicator } from 'mint-ui'
  // 判断是否是微信浏览器
  import { IsWeiXin } from '../../common/js/isWeiXin'
  import { billIdent } from '../../api/MyOrder'

  export default {
    name: 'Receipt',
    data () {
      return {
        comName: '', // 公司名称
        regNumber: '', // 公司注册号
        address: '', // 公司地址
        name: '', // 真实姓名
        idNumber: '', // 身份证号
        telephone: '', // 电话号码
        ordinaryShow: {
          type: Boolean // 普通浏览器
        },
        weixinShow: {
          type: Boolean // 微信浏览器
        },
        serverIds: [], // 存放微信上传的图片
        ordinaryImg: [] // 存放普通浏览器上传的图片
      }
    },
    created () {
      // 判断是否是微信浏览器
      if (IsWeiXin()) {
        this.ordinaryShow = false
        this.weixinShow = true
      } else {
        this.ordinaryShow = true
        this.weixinShow = false
      }
    },
    methods: {
      // 图片上传（微信）
      getImage (image) {
        this.serverIds = image
      },
      // 图片上传（普通）
      getImg (image) {
        this.ordinaryImg = image
        console.log(this.ordinaryImg)
      },
      // 确认提交
      subRecepit () {
        setTimeout(function () {
          Indicator.close()
        }, 5000)
        // 公司名字
        if (!this.comName) {
          Toast({
            message: '请输入公司名称',
            position: 'middle',
            duration: 1000
          })
          return
        }
        // 公司注册号
        if (!this.regNumber) {
          Toast({
            message: '请填写公司注册号',
            position: 'middle',
            duration: 1000
          })
          return
        }
        // 姓名
        if (!this.name.length) {
          Toast({
            message: '请填写真实姓名',
            position: 'middle',
            duration: 1000
          })
          return
        }
        // 身份证号码
        if (!this.idNumber.length) {
          Toast({
            message: '请填写身份证号码',
            position: 'middle',
            duration: 1000
          })
          return
        } else {
          var reg = new RegExp(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/)
          if (!reg.test(this.idNumber)) {
            Toast({
              message: '请填写正确的身份证号码',
              position: 'middle',
              duration: 1000
            })
            return
          }
        }
        // 电话号码
        if (this.telephone.length !== 11 && (typeof this.telephone) !== Number) {
          Toast({
            message: '手机号码格式不对',
            position: 'middle',
            duration: 1000
          })
          return
        }
        if (!this.address) {
          Toast({
            message: '请输入公司地址',
            position: 'middle',
            duration: 1000
          })
          return
        }
        // if (!this.serverIds.length) {
        //   Toast({
        //     message: '请上传认证图片',
        //     position: 'middle',
        //     duration: 1000
        //   })
        //   return
        // }
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        billIdent(this.name, this.telephone, this.idNumber, this.serverIds).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: res.data.message,
              position: 'middle',
              duration: 2000
            })
            this.$router.back()
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 1500
            })
            return
          }
        })
      }
    },
    components: {
      headTop,
      CheckPublish,
      CheckPub
    }
  }
</script>

<style lang="scss" scoped>
  .receipt-main {
    padding-top: 40px;
    .receipt {
      .tops {
        padding: 10px;
        border-bottom: 10px solid #f2f2f2;
        p {
          font-size: 13px;
          color: #0c7ad9;
          line-height: 20px;
        }
      }
      .fill_in {
        border-bottom: 10px solid #f2f2f2;
        ul {
          padding: 0 10px;
          li {
            font-size: 1.3rem;
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid #d9d9d9;
            input {
              width: 42%;
              border: none;
              outline: none;
              font-size: 1.2rem;
              color: #888888;
            }
          }
          li:last-child {
            border-bottom: none;
          }
          .li_address {
            padding-bottom: 10px;
            p {
              font-size: 1.3rem;
              padding: 10px 0;
            }
            textarea {
              width: 94%;
              height: 30px;
              background: #f2f2f2;
              outline: none;
              resize: none;
              padding: 10px;
              font-size: 1.2rem;
              color: #888888;
              border: 1px solid #d9d9d9;
            }
          }
        }
      }
      .papers {
        border-bottom: 10px solid #f2f2f2;
        h3 {
          font-size: 14px;
          font-weight: normal;
          margin: 15px 10px 0 10px;
          padding-bottom: 15px;
          border-bottom: 1px solid #d9d9d9;
        }
      }
      .warn {
        padding: 10px;
        border-bottom: 10px solid #f2f2f2;
        .warn_title {
          padding: 10px 0;
          display: -moz-box; /* Firefox */
          display: -ms-flexbox; /* IE10 */
          display: -webkit-box; /* Safari */
          display: -webkit-flex; /* Chrome, WebKit */
          display: flex;
          align-items: center;
          border-bottom: 1px solid #d9d9d9;
          img {
            width: 20px;
          }
          span {
            font-size: 15px;
            margin-left: 5px;
            color: #000;
          }
        }
        ul {
          margin-top: 5px;
          li {
            font-size: 14px;
            line-height: 26px;
          }
        }
      }
      .receipt-btn {
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
        button {
          width: 90%;
          height: 44px;
          background: #0078de;
          outline: none;
          border: none;
          border-radius: 5px;
          margin-top: 20px;
          span {
            font-size: 15px;
            color: #fff;
          }
        }
      }
    }
  }
</style>
